import "./my.css"
import { useEffect } from "react"
import useRequest from '../hooks/useRequest'
function My() {
    const { data, loading } = useRequest('http://10.2.35.4/api/nezha2.json', { imgs: [] })
    useEffect(() => {
        console.log(data)
    }, [data])
    return <div className="container">
        <div className="top">
            <div className="avatar">
                <img src={data.imgs[0]} alt="" />
            </div>
            <div className="info">
                <div className="username">{data.name}</div>
                <span className="email">{data.email}</span>
                <span className="address">{data.company}</span>
            </div>
        </div>
        <div className="bottom">
            <h2>作品：</h2>
            <div className="imgContainer">
                {
                    data.imgs.map(url => {
                        return <img src={url} alt="" />
                    })
                }
            </div>
        </div>
        {loading && <div className="mask">正在加载中...</div>}
    </div>
}

export default My;